<template>
    <div class="expert-wrap">
        <expert-nav-category expertNavCategory="Master"></expert-nav-category>
        大师精析
        <infinite-scroll class="infinite-scroll-wrap" @loadMore="loadMore" :immediate-check="true">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div>{{ item.name }}</div>
                <img :src="item.img" alt="" />
            </div>
        </infinite-scroll>
        <bottom-menu></bottom-menu>
    </div>
</template>

<script>
import BottomMenu from 'components/bottom-menu/bottom-menu';
import ExpertNavCategory from './components/expert-nav-category/expert-nav-category';
import InfiniteScroll from 'components/infinite-scroll/infinite-scroll';
import { expertApi } from 'api';
export default {
    name: 'DuoduocaiH5Master',
    components: { BottomMenu, ExpertNavCategory, InfiniteScroll },
    data() {
        return {
            list: [],
        };
    },

    mounted() {},

    methods: {
        fetchData(cb) {
            expertApi.list().then((res) => {
                console.log('🚀 ~ file: master.vue ~ line 29 ~ expertApi.list ~ res', res);
                if (res.code == 0) {
                    this.list = this.list.concat(res.data.list);
                    if (this.list.length >= 30) {
                        cb(false);
                    } else {
                        cb(true);
                    }
                }
            });
        },
        loadMore(cb) {
            this.fetchData(cb);
        },
    },
};
</script>

<style lang="scss" scoped>
.expert-wrap {
    padding-bottom: 50px;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    .expert-nav {
        flex-shrink: 0;
    }
    .infinite-scroll-wrap {
        flex: 1;
        overflow-y: auto;
    }

    .item {
        text-align: center;
        img {
            width: 100%;
        }
    }
}
</style>
